<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>MyTechBook</title>
        
    <link rel="stylesheet" type="text/css" href="../../static/css/main.css">
</head>
<body>
<div class="navbar navbar-line">
    <div class="container">
        <div class="logo">
            
                MyTechBook
            
        </div>
        <input type="checkbox" id="idoc_nav" />
        <div class="menu_tree">
        <ul><li><a href="../../index.html">首页</a></li><li><a href="#"><span></span>前沿观察</a><ul><li><a href="../../html/前沿观察/ECMAScript 6入门.html">ECMAScript 6入门</a></li><li><a href="../../html/前沿观察/Immutable详解及React中实践.html">Immutable详解及React中实践</a></li><li><a href="../../html/前沿观察/Node.js MVC框架ThinkJS.html">Node.js MVC框架ThinkJS</a></li><li><a href="../../html/前沿观察/Nodejs 5.0.0版本.html">Nodejs 5.0.0版本</a></li><li><a href="../../html/前沿观察/关系型数据库PostgreSQL.html">关系型数据库PostgreSQL</a></li><li class="active"><a href="../../html/前沿观察/轻型MVVM框架Vue.js.html">轻型MVVM框架Vue.js</a></li><li><a href="../../html/前沿观察/基于nodejs的开发框架koa.html">基于nodejs的开发框架koa</a></li></ul></li><li><a href="#"><span></span>前端工程化</a><ul><li><a href="../../html/前端工程化/前端模板.html">前端模板</a></li><li><a href="../../html/前端工程化/性能优化和前端工程的爱恨情仇.html">性能优化和前端工程的爱恨情仇</a></li><li><a href="../../html/前端工程化/webpack入门及实践.html">webpack入门及实践</a></li><li><a href="../../html/前端工程化/前端工程化不完全装逼指南.html">前端工程化不完全装逼指南</a></li></ul></li><li><a href="#"><span></span>性能优化</a><ul><li><a href="../../html/性能优化/jshint代码质量检测.html">jshint代码质量检测</a></li><li><a href="../../html/性能优化/jshint配置说明.html">jshint配置说明</a></li><li><a href="../../html/性能优化/NC性能优化.html">NC性能优化</a></li><li><a href="../../html/性能优化/React编码规范.html">React编码规范</a></li><li><a href="../../html/性能优化/性能优化待办事项.html">性能优化待办事项</a></li><li><a href="../../html/性能优化/性能优化点总结.html">性能优化点总结</a></li></ul></li><li><a href="#"><span></span>技术分享</a><ul><li><a href="../../html/技术分享/React技术分享.html">React技术分享</a></li><li><a href="../../html/技术分享/学习Git.html">学习Git</a></li><li><a href="../../html/技术分享/面向对象.html">面向对象</a></li><li><a href="../../html/技术分享/Node.js知识详解.html">Node.js知识详解</a></li><li><a href="../../html/技术分享/2015年大前端技术年终总结.html">2015年大前端技术年终总结</a></li></ul></li><li><a href="#"><span></span>随想笔记</a><ul><li><a href="../../html/随想笔记/项目技术栈规划.html">项目技术栈规划</a></li><li><a href="../../html/随想笔记/笔试面试大纲.html">笔试面试大纲</a></li></ul></li><li><a href="../../html/CONTACT.html">CONTACT</a></li></ul>    
        </div>
        
        
        <div class="forkgithub"><a target="_blank" href="https://github.com/sujunming">fork on github</a></div>
        

        <section class="idoc_nav_btn">
            <label for="idoc_nav"><span></span></label>
        </section>
    </div>
    
</div>




<div class="container">

    <div class="page-toc">
        <ul><li><a href="#t0轻型MVVM框架Vue.js">轻型MVVM框架Vue.js</a><ul><li><a href="#t1介绍">介绍</a></li><li><a href="#t2安装">安装</a></li><li><a href="#t3概念综述">概念综述</a><ul><li><a href="#t4ViewModel">ViewModel</a></li><li><a href="#t5视图 View">视图 View</a></li><li><a href="#t6模型 Model">模型 Model</a></li><li><a href="#t7指令 Directives">指令 Directives</a></li><li><a href="#t8过滤器 Filters">过滤器 Filters</a></li><li><a href="#t9组件 Components">组件 Components</a></li><li><a href="#t10简单示例">简单示例</a></li></ul></li><li><a href="#t11指令">指令</a></li><li><a href="#t12过滤器">过滤器</a></li><li><a href="#t13列表渲染">列表渲染</a></li><li><a href="#t14事件监听">事件监听</a></li><li><a href="#t15处理表单">处理表单</a></li><li><a href="#t16计算属性">计算属性</a></li><li><a href="#t17自定义指令">自定义指令</a></li><li><a href="#t18自定义过滤器">自定义过滤器</a></li><li><a href="#t19组件系统">组件系统</a></li><li><a href="#t20过渡效果">过渡效果</a></li><li><a href="#t21构建应用">构建应用</a></li></ul></li></ul>
    </div>
    
    <div class="content markdown-body">
        <h1 id="t0&#x8F7B;&#x578B;MVVM&#x6846;&#x67B6;Vue.js">&#x8F7B;&#x578B;MVVM&#x6846;&#x67B6;Vue.js <a href="#t0&#x8F7B;&#x578B;MVVM&#x6846;&#x67B6;Vue.js"> # </a></h1>
<h2 id="t1&#x4ECB;&#x7ECD;">&#x4ECB;&#x7ECD; <a href="#t1&#x4ECB;&#x7ECD;"> # </a></h2>
<p>Vue.js &#x662F;&#x4E00;&#x4E2A;&#x7528;&#x4E8E;&#x521B;&#x5EFA; web &#x4EA4;&#x4E92;&#x754C;&#x9762;&#x7684;&#x5E93;&#x3002;</p>
<p>&#x4ECE;&#x6280;&#x672F;&#x89D2;&#x5EA6;&#x8BB2;&#xFF0C;Vue.js &#x4E13;&#x6CE8;&#x4E8E; MVVM &#x6A21;&#x578B;&#x7684; ViewModel &#x5C42;&#x3002;&#x5B83;&#x901A;&#x8FC7;&#x53CC;&#x5411;&#x6570;&#x636E;&#x7ED1;&#x5B9A;&#x628A; View &#x5C42;&#x548C; Model &#x5C42;&#x8FDE;&#x63A5;&#x4E86;&#x8D77;&#x6765;&#x3002;&#x5B9E;&#x9645;&#x7684; DOM &#x5C01;&#x88C5;&#x548C;&#x8F93;&#x51FA;&#x683C;&#x5F0F;&#x90FD;&#x88AB;&#x62BD;&#x8C61;&#x4E3A;&#x4E86; Directives &#x548C; Filters&#x3002;</p>
<p>&#x4ECE;&#x54F2;&#x5B66;&#x89D2;&#x5EA6;&#x8BB2;&#xFF0C;Vue &#x5E0C;&#x671B;&#x901A;&#x8FC7;&#x4E00;&#x4E2A;&#x5C3D;&#x91CF;&#x7B80;&#x5355;&#x7684; API &#x6765;&#x63D0;&#x4F9B;&#x54CD;&#x5E94;&#x5F0F;&#x7684;&#x6570;&#x636E;&#x7ED1;&#x5B9A;&#x548C;&#x53EF;&#x7EC4;&#x5408;&#x3001;&#x590D;&#x7528;&#x7684;&#x89C6;&#x56FE;&#x7EC4;&#x4EF6;&#x3002;&#x5B83;&#x4E0D;&#x662F;&#x4E00;&#x4E2A;&#x5927;&#x800C;&#x5168;&#x7684;&#x6846;&#x67B6;&#x2014;&#x2014;&#x5B83;&#x53EA;&#x662F;&#x4E00;&#x4E2A;&#x7B80;&#x5355;&#x7075;&#x6D3B;&#x7684;&#x89C6;&#x56FE;&#x5C42;&#x3002;&#x60A8;&#x53EF;&#x4EE5;&#x72EC;&#x7ACB;&#x4F7F;&#x7528;&#x5B83;&#x5FEB;&#x901F;&#x5F00;&#x53D1;&#x539F;&#x578B;&#x3001;&#x4E5F;&#x53EF;&#x4EE5;&#x6DF7;&#x5408;&#x522B;&#x7684;&#x5E93;&#x505A;&#x66F4;&#x591A;&#x7684;&#x4E8B;&#x60C5;&#x3002;&#x5B83;&#x540C;&#x65F6;&#x548C;&#x8BF8;&#x5982; Firebase &#x8FD9;&#x4E00;&#x7C7B;&#x7684; BaaS &#x670D;&#x52A1;&#x6709;&#x7740;&#x5929;&#x7136;&#x7684;&#x5951;&#x5408;&#x5EA6;&#x3002;</p>
<p>Vue.js &#x7684; API &#x8BBE;&#x8BA1;&#x6DF1;&#x53D7; AngularJS&#x3001;KnockoutJS&#x3001;Ractive.js &#x548C; Rivets.js &#x7684;&#x5F71;&#x54CD;&#x3002;&#x5C3D;&#x7BA1;&#x6709;&#x4E0D;&#x5C11;&#x76F8;&#x4F3C;&#x4E4B;&#x5904;&#xFF0C;&#x4F46;&#x6211;&#x4EEC;&#x76F8;&#x4FE1; Vue.js &#x80FD;&#x591F;&#x5728;&#x7B80;&#x7EA6;&#x548C;&#x529F;&#x80FD;&#x4E4B;&#x95F4;&#x7684;&#x5FAE;&#x5999;&#x5E73;&#x8861;&#x4E2D;&#x4F53;&#x73B0;&#x51FA;&#x5176;&#x72EC;&#x6709;&#x7684;&#x4EF7;&#x503C;&#x3002;</p>
<p>&#x5373;&#x4FBF;&#x60A8;&#x5DF2;&#x7ECF;&#x719F;&#x6089;&#x4E86;&#x4E00;&#x4E9B;&#x8FD9;&#x7C7B;&#x7684;&#x5E93;&#x6216;&#x6846;&#x67B6;&#xFF0C;&#x6211;&#x4EEC;&#x8FD8;&#x662F;&#x63A8;&#x8350;&#x60A8;&#x7EE7;&#x7EED;&#x9605;&#x8BFB;&#x63A5;&#x4E0B;&#x6765;&#x7684;&#x6982;&#x89C8;&#xFF0C;&#x56E0;&#x4E3A;&#x60A8;&#x5BF9;&#x5B83;&#x4EEC;&#x7684;&#x8BA4;&#x8BC6;&#x4E5F;&#x8BB8;&#x548C;&#x5B83;&#x4EEC;&#x5728; Vue.js &#x8BED;&#x5883;&#x4E0B;&#x7684;&#x5B9A;&#x4E49;&#x4E0D;&#x5C3D;&#x76F8;&#x540C;&#x3002;</p>
<h2 id="t2&#x5B89;&#x88C5;">&#x5B89;&#x88C5; <a href="#t2&#x5B89;&#x88C5;"> # </a></h2>
<ul>
<li>CDN<pre><code>&lt;script src=&quot;https://raw.githubusercontent.com/yyx990803/vue/0.12.16/dist/vue.min.js&quot;&gt;&lt;script&gt;
</code></pre></li>
<li>npm</li>
<li>bower</li>
</ul>
<h2 id="t3&#x6982;&#x5FF5;&#x7EFC;&#x8FF0;">&#x6982;&#x5FF5;&#x7EFC;&#x8FF0; <a href="#t3&#x6982;&#x5FF5;&#x7EFC;&#x8FF0;"> # </a></h2>
<h3 id="t4ViewModel">ViewModel <a href="#t4ViewModel"> # </a></h3>
<p>&#x4E00;&#x4E2A;&#x540C;&#x6B65; Model &#x548C; View &#x7684;&#x5BF9;&#x8C61;&#x3002;&#x5728; Vue.js &#x4E2D;&#xFF0C;&#x6BCF;&#x4E2A; Vue &#x5B9E;&#x4F8B;&#x90FD;&#x662F;&#x4E00;&#x4E2A; ViewModel&#x3002;&#x5B83;&#x4EEC;&#x662F;&#x901A;&#x8FC7;&#x6784;&#x9020;&#x51FD;&#x6570; Vue &#x6216;&#x5176;&#x5B50;&#x7C7B;&#x88AB;&#x521B;&#x5EFA;&#x51FA;&#x6765;&#x7684;&#x3002;</p>
<pre><code>var vm = new Vue({ /* options */ })
</code></pre><p>&#x8FD9;&#x662F;&#x60A8;&#x4F5C;&#x4E3A;&#x4E00;&#x4E2A;&#x5F00;&#x53D1;&#x8005;&#x5728;&#x4F7F;&#x7528; Vue.js &#x65F6;&#x4E3B;&#x8981;&#x6253;&#x4EA4;&#x9053;&#x7684;&#x5BF9;&#x8C61;&#x3002;&#x66F4;&#x591A;&#x7684;&#x7EC6;&#x8282;&#x8BF7;&#x79FB;&#x6B65;&#x81F3; Vue &#x6784;&#x9020;&#x51FD;&#x6570;&#x3002;</p>
<h3 id="t5&#x89C6;&#x56FE; View">&#x89C6;&#x56FE; View <a href="#t5&#x89C6;&#x56FE; View"> # </a></h3>
<p>&#x88AB; Vue &#x5B9E;&#x4F8B;&#x7BA1;&#x7406;&#x7684; DOM &#x8282;&#x70B9;&#x3002;</p>
<pre><code>vm.$el // The View
</code></pre><p>Vue.js &#x4F7F;&#x7528;&#x57FA;&#x4E8E; DOM &#x7684;&#x6A21;&#x677F;&#x3002;&#x6BCF;&#x4E2A; Vue &#x5B9E;&#x4F8B;&#x90FD;&#x5173;&#x8054;&#x7740;&#x4E00;&#x4E2A;&#x76F8;&#x5E94;&#x7684; DOM &#x5143;&#x7D20;&#x3002;&#x5F53;&#x4E00;&#x4E2A; Vue &#x5B9E;&#x4F8B;&#x88AB;&#x521B;&#x5EFA;&#x65F6;&#xFF0C;&#x5B83;&#x4F1A;&#x9012;&#x5F52;&#x904D;&#x5386;&#x6839;&#x5143;&#x7D20;&#x7684;&#x6240;&#x6709;&#x5B50;&#x7ED3;&#x70B9;&#xFF0C;&#x540C;&#x65F6;&#x5B8C;&#x6210;&#x5FC5;&#x8981;&#x7684;&#x6570;&#x636E;&#x7ED1;&#x5B9A;&#x3002;&#x5F53;&#x8FD9;&#x4E2A;&#x89C6;&#x56FE;&#x88AB;&#x7F16;&#x8BD1;&#x4E4B;&#x540E;&#xFF0C;&#x5B83;&#x5C31;&#x4F1A;&#x81EA;&#x52A8;&#x54CD;&#x5E94;&#x6570;&#x636E;&#x7684;&#x53D8;&#x5316;&#x3002;</p>
<p>&#x5728;&#x4F7F;&#x7528; Vue.js &#x65F6;&#xFF0C;&#x9664;&#x4E86;&#x81EA;&#x5B9A;&#x4E49;&#x6307;&#x4EE4; (&#x7A0D;&#x540E;&#x4F1A;&#x6709;&#x89E3;&#x91CA;)&#xFF0C;&#x60A8;&#x51E0;&#x4E4E;&#x4E0D;&#x5FC5;&#x76F4;&#x63A5;&#x63A5;&#x89E6; DOM&#x3002;&#x5F53;&#x6570;&#x636E;&#x53D1;&#x751F;&#x53D8;&#x5316;&#x65F6;&#xFF0C;&#x89C6;&#x56FE;&#x5C06;&#x4F1A;&#x81EA;&#x52A8;&#x89E6;&#x53D1;&#x66F4;&#x65B0;&#x3002;&#x8FD9;&#x4E9B;&#x66F4;&#x65B0;&#x7684;&#x7C92;&#x5EA6;&#x7CBE;&#x786E;&#x5230;&#x4E00;&#x4E2A;&#x6587;&#x5B57;&#x8282;&#x70B9;&#x3002;&#x540C;&#x65F6;&#x4E3A;&#x4E86;&#x66F4;&#x597D;&#x7684;&#x6027;&#x80FD;&#xFF0C;&#x8FD9;&#x4E9B;&#x66F4;&#x65B0;&#x662F;&#x6279;&#x91CF;&#x5F02;&#x6B65;&#x6267;&#x884C;&#x7684;&#x3002;</p>
<h3 id="t6&#x6A21;&#x578B; Model">&#x6A21;&#x578B; Model <a href="#t6&#x6A21;&#x578B; Model"> # </a></h3>
<p>&#x4E00;&#x4E2A;&#x8F7B;&#x5FAE;&#x6539;&#x52A8;&#x8FC7;&#x7684;&#x539F;&#x751F; JavaScript &#x5BF9;&#x8C61;&#x3002;</p>
<pre><code>vm.$data // The Model
</code></pre><p>Vue.js &#x4E2D;&#x7684;&#x6A21;&#x578B;&#x5C31;&#x662F;&#x666E;&#x901A;&#x7684; JavaScript &#x5BF9;&#x8C61; &#x2014;&#x2014; &#x4E5F;&#x53EF;&#x4EE5;&#x79F0;&#x4E3A;&#x6570;&#x636E;&#x5BF9;&#x8C61;&#x3002;&#x4E00;&#x65E6;&#x67D0;&#x5BF9;&#x8C61;&#x88AB;&#x4F5C;&#x4E3A; Vue &#x5B9E;&#x4F8B;&#x4E2D;&#x7684;&#x6570;&#x636E;&#xFF0C;&#x5B83;&#x5C31;&#x6210;&#x4E3A;&#x4E00;&#x4E2A; &#x201C;&#x54CD;&#x5E94;&#x5F0F;&#x201D; &#x7684;&#x5BF9;&#x8C61;&#x4E86;&#x3002;&#x4F60;&#x53EF;&#x4EE5;&#x64CD;&#x4F5C;&#x5B83;&#x4EEC;&#x7684;&#x5C5E;&#x6027;&#xFF0C;&#x540C;&#x65F6;&#x6B63;&#x5728;&#x89C2;&#x5BDF;&#x5B83;&#x7684; Vue &#x5B9E;&#x4F8B;&#x4E5F;&#x4F1A;&#x6536;&#x5230;&#x63D0;&#x793A;&#x3002;Vue.js &#x628A;&#x6570;&#x636E;&#x5BF9;&#x8C61;&#x7684;&#x5C5E;&#x6027;&#x90FD;&#x8F6C;&#x6362;&#x6210;&#x4E86; ES5 &#x4E2D;&#x7684; getter/setters&#xFF0C;&#x4EE5;&#x6B64;&#x8FBE;&#x5230;&#x65E0;&#x7F1D;&#x7684;&#x6570;&#x636E;&#x89C2;&#x5BDF;&#x6548;&#x679C;&#xFF1A;&#x65E0;&#x9700;&#x810F;&#x503C;&#x68C0;&#x67E5;&#xFF0C;&#x4E5F;&#x4E0D;&#x9700;&#x8981;&#x523B;&#x610F;&#x7ED9; Vue &#x4EFB;&#x4F55;&#x66F4;&#x65B0;&#x89C6;&#x56FE;&#x7684;&#x4FE1;&#x53F7;&#x3002;&#x6BCF;&#x5F53;&#x6570;&#x636E;&#x53D8;&#x5316;&#x65F6;&#xFF0C;&#x89C6;&#x56FE;&#x90FD;&#x4F1A;&#x5728;&#x4E0B;&#x4E00;&#x5E27;&#x81EA;&#x52A8;&#x66F4;&#x65B0;&#x3002;</p>
<p>Vue &#x5B9E;&#x4F8B;&#x4EE3;&#x7406;&#x4E86;&#x5B83;&#x4EEC;&#x89C2;&#x5BDF;&#x5230;&#x7684;&#x6570;&#x636E;&#x5BF9;&#x8C61;&#x7684;&#x6240;&#x6709;&#x5C5E;&#x6027;&#x3002;&#x6240;&#x4EE5;&#x4E00;&#x65E6;&#x4E00;&#x4E2A;&#x5BF9;&#x8C61; { a: 1 } &#x88AB;&#x89C2;&#x5BDF;&#xFF0C;&#x90A3;&#x4E48; vm.$data.a &#x548C; vm.a &#x5C06;&#x4F1A;&#x8FD4;&#x56DE;&#x76F8;&#x540C;&#x7684;&#x503C;&#xFF0C;&#x800C;&#x8BBE;&#x7F6E; vm.a = 2 &#x5219;&#x4E5F;&#x4F1A;&#x4FEE;&#x6539; vm.$data&#x3002;</p>
<p>&#x6570;&#x636E;&#x5BF9;&#x8C61;&#x662F;&#x88AB;&#x5C31;&#x5730;&#x8F6C;&#x5316;&#x7684;&#xFF0C;&#x6240;&#x4EE5;&#x6839;&#x636E;&#x5F15;&#x7528;&#x4FEE;&#x6539;&#x6570;&#x636E;&#x548C;&#x4FEE;&#x6539; vm.$data &#x5177;&#x6709;&#x76F8;&#x540C;&#x7684;&#x6548;&#x679C;&#x3002;&#x8FD9;&#x4E5F;&#x610F;&#x5473;&#x7740;&#x591A;&#x4E2A; Vue &#x5B9E;&#x4F8B;&#x53EF;&#x4EE5;&#x89C2;&#x5BDF;&#x540C;&#x4E00;&#x4EFD;&#x6570;&#x636E;&#x3002;&#x5728;&#x8F83;&#x5927;&#x578B;&#x7684;&#x5E94;&#x7528;&#x7A0B;&#x5E8F;&#x4E2D;&#xFF0C;&#x6211;&#x4EEC;&#x4E5F;&#x63A8;&#x8350;&#x5C06; Vue &#x5B9E;&#x4F8B;&#x4F5C;&#x4E3A;&#x7EAF;&#x7CB9;&#x7684;&#x89C6;&#x56FE;&#x770B;&#x5F85;&#xFF0C;&#x540C;&#x65F6;&#x628A;&#x6570;&#x636E;&#x5904;&#x7406;&#x903B;&#x8F91;&#x653E;&#x5728;&#x66F4;&#x72EC;&#x7ACB;&#x7684;&#x5916;&#x90E8;&#x6570;&#x636E;&#x5C42;&#x3002;</p>
<p>&#x503C;&#x5F97;&#x63D0;&#x9192;&#x7684;&#x662F;&#xFF0C;&#x4E00;&#x65E6;&#x6570;&#x636E;&#x88AB;&#x89C2;&#x5BDF;&#xFF0C;Vue.js &#x5C31;&#x4E0D;&#x4F1A;&#x518D;&#x4FA6;&#x6D4B;&#x5230;&#x65B0;&#x52A0;&#x5165;&#x6216;&#x5220;&#x9664;&#x7684;&#x5C5E;&#x6027;&#x4E86;&#x3002;&#x4F5C;&#x4E3A;&#x5F25;&#x8865;&#xFF0C;&#x6211;&#x4EEC;&#x4F1A;&#x4E3A;&#x88AB;&#x89C2;&#x5BDF;&#x7684;&#x5BF9;&#x8C61;&#x589E;&#x52A0; $add , $set&#x548C; $delete &#x65B9;&#x6CD5;&#x3002;</p>
<p>&#x4E0B;&#x9762;&#x662F;&#x5BF9; Vue.js &#x6570;&#x636E;&#x89C2;&#x6D4B;&#x673A;&#x5236;&#x5B9E;&#x73B0;&#x7684;&#x9AD8;&#x5C42;&#x6982;&#x89C8;&#xFF1A;</p>
<p>&#x6570;&#x636E;&#x89C2;&#x5BDF;</p>
<h3 id="t7&#x6307;&#x4EE4; Directives">&#x6307;&#x4EE4; Directives <a href="#t7&#x6307;&#x4EE4; Directives"> # </a></h3>
<p>&#x5E26;&#x7279;&#x6B8A;&#x524D;&#x7F00;&#x7684; HTML &#x7279;&#x6027;&#xFF0C;&#x53EF;&#x4EE5;&#x8BA9; Vue.js &#x5BF9;&#x4E00;&#x4E2A; DOM &#x5143;&#x7D20;&#x505A;&#x5404;&#x79CD;&#x5904;&#x7406;&#x3002;</p>
<pre><code>&lt;div v-text=&quot;message&quot;&gt;&lt;/div&gt;
</code></pre><p>&#x8FD9;&#x91CC;&#x7684; div &#x5143;&#x7D20;&#x6709;&#x4E00;&#x4E2A; v-text &#x6307;&#x4EE4;&#xFF0C;&#x5176;&#x503C;&#x4E3A; message&#x3002;Vue.js &#x4F1A;&#x8BA9;&#x8BE5; div &#x7684;&#x6587;&#x672C;&#x5185;&#x5BB9;&#x4E0E; Vue &#x5B9E;&#x4F8B;&#x4E2D;&#x7684; message &#x5C5E;&#x6027;&#x503C;&#x4FDD;&#x6301;&#x4E00;&#x81F4;&#x3002;</p>
<p>Directives &#x53EF;&#x4EE5;&#x5C01;&#x88C5;&#x4EFB;&#x4F55; DOM &#x64CD;&#x4F5C;&#x3002;&#x6BD4;&#x5982; v-attr &#x4F1A;&#x64CD;&#x4F5C;&#x4E00;&#x4E2A;&#x5143;&#x7D20;&#x7684;&#x7279;&#x6027;&#xFF1B;v-repeat &#x4F1A;&#x57FA;&#x4E8E;&#x6570;&#x7EC4;&#x6765;&#x590D;&#x5236;&#x4E00;&#x4E2A;&#x5143;&#x7D20;&#xFF1B;v-on &#x4F1A;&#x7ED1;&#x5B9A;&#x4E8B;&#x4EF6;&#x7B49;&#x3002;&#x7A0D;&#x540E;&#x4F1A;&#x6709;&#x66F4;&#x591A;&#x7684;&#x4ECB;&#x7ECD;&#x3002;</p>
<p>Mustache &#x98CE;&#x683C;&#x7ED1;&#x5B9A;</p>
<p>&#x4F60;&#x4E5F;&#x53EF;&#x4EE5;&#x4F7F;&#x7528; mustache &#x98CE;&#x683C;&#x7684;&#x7ED1;&#x5B9A;&#xFF0C;&#x4E0D;&#x7BA1;&#x5728;&#x6587;&#x672C;&#x4E2D;&#x8FD8;&#x662F;&#x5728;&#x5C5E;&#x6027;&#x4E2D;&#x3002;&#x5B83;&#x4EEC;&#x5728;&#x5E95;&#x5C42;&#x4F1A;&#x88AB;&#x8F6C;&#x6362;&#x6210; v-text &#x548C; v-attr &#x7684;&#x6307;&#x4EE4;&#x3002;&#x6BD4;&#x5982;&#xFF1A;</p>
<pre><code>&lt;div id=&quot;person-{{id}}&quot;&gt;Hello {{name}}!&lt;/div&gt;
</code></pre><p>&#x8FD9;&#x5F88;&#x65B9;&#x4FBF;&#xFF0C;&#x4E0D;&#x8FC7;&#x6709;&#x4E00;&#x4E9B;&#x6CE8;&#x610F;&#x4E8B;&#x9879;&#xFF1A;</p>
<p>&#x4E00;&#x4E2A; <image> &#x7684; src &#x5C5E;&#x6027;&#x5728;&#x8D4B;&#x503C;&#x65F6;&#x4F1A;&#x4EA7;&#x751F;&#x4E00;&#x4E2A; HTTP &#x8BF7;&#x6C42;&#xFF0C;&#x6240;&#x4EE5;&#x5F53;&#x6A21;&#x677F;&#x5728;&#x7B2C;&#x4E00;&#x6B21;&#x88AB;&#x89E3;&#x6790;&#x65F6;&#x4F1A;&#x4EA7;&#x751F;&#x4E00;&#x4E2A; 404 &#x8BF7;&#x6C42;&#x3002;&#x8FD9;&#x79CD;&#x60C5;&#x51B5;&#x4E0B;&#x66F4;&#x9002;&#x5408;&#x7528; v-attr&#x3002;</image></p>
<p>Internet Explorer &#x5728;&#x89E3;&#x6790; HTML &#x65F6;&#x4F1A;&#x79FB;&#x9664;&#x975E;&#x6CD5;&#x7684;&#x5185;&#x8054; style &#x5C5E;&#x6027;&#xFF0C;&#x6240;&#x4EE5;&#x5982;&#x679C;&#x4F60;&#x60F3;&#x652F;&#x6301; IE&#xFF0C;&#x8BF7;&#x5728;&#x7ED1;&#x5B9A;&#x5185;&#x8054; CSS &#x7684;&#x65F6;&#x5019;&#x59CB;&#x7EC8;&#x4F7F;&#x7528; v-style&#x3002;</p>
<p>&#x4F60;&#x53EF;&#x4EE5;&#x4F7F;&#x7528;&#x4E09;&#x5BF9;&#x82B1;&#x62EC;&#x53F7;&#x6765;&#x56DE;&#x907F; HTML &#x4EE3;&#x7801;&#xFF0C;&#x800C;&#x8FD9;&#x79CD;&#x5199;&#x6CD5;&#x4F1A;&#x5728;&#x5E95;&#x5C42;&#x8F6C;&#x6362;&#x4E3A; v-html&#xFF1A;</p>
<pre><code>{{{ safeHTMLString }}}
</code></pre><p>&#x4E0D;&#x8FC7;&#x8FD9;&#x79CD;&#x7528;&#x6CD5;&#x4F1A;&#x7559;&#x4E0B; XSS &#x653B;&#x51FB;&#x7684;&#x9690;&#x60A3;&#xFF0C;&#x6240;&#x4EE5;&#x5EFA;&#x8BAE;&#x53EA;&#x5BF9;&#x7EDD;&#x5BF9;&#x4FE1;&#x4EFB;&#x7684;&#x6570;&#x636E;&#x6765;&#x6E90;&#x4F7F;&#x7528;&#x4E09;&#x5BF9;&#x82B1;&#x62EC;&#x53F7;&#x7684;&#x5199;&#x6CD5;&#xFF0C;&#x6216;&#x8005;&#x5148;&#x901A;&#x8FC7;&#x81EA;&#x5B9A;&#x4E49;&#x7684;&#x8FC7;&#x6EE4;&#x5668; (filter) &#x5BF9;&#x4E0D;&#x53EF;&#x4FE1;&#x4EFB;&#x7684; HTML &#x8FDB;&#x884C;&#x8FC7;&#x6EE4;&#x3002;</p>
<p>&#x6700;&#x540E;&#xFF0C;&#x4F60;&#x53EF;&#x4EE5;&#x5728;&#x4F60;&#x7684; mustache &#x7ED1;&#x5B9A;&#x91CC;&#x52A0;&#x5165; * &#x6765;&#x6CE8;&#x660E;&#x8FD9;&#x662F;&#x4E00;&#x4E2A;&#x4E00;&#x6B21;&#x6027;&#x64B0;&#x5199;&#x7684;&#x6570;&#x636E;&#xFF0C;&#x8FD9;&#x6837;&#x7684;&#x8BDD;&#x5B83;&#x5C31;&#x4E0D;&#x4F1A;&#x54CD;&#x5E94;&#x540E;&#x7EED;&#x7684;&#x6570;&#x636E;&#x53D8;&#x5316;&#xFF1A;</p>
<pre><code>{{* onlyOnce }}
</code></pre><h3 id="t8&#x8FC7;&#x6EE4;&#x5668; Filters">&#x8FC7;&#x6EE4;&#x5668; Filters <a href="#t8&#x8FC7;&#x6EE4;&#x5668; Filters"> # </a></h3>
<p>&#x8FC7;&#x6EE4;&#x5668;&#x662F;&#x7528;&#x4E8E;&#x5728;&#x66F4;&#x65B0;&#x89C6;&#x56FE;&#x4E4B;&#x524D;&#x5904;&#x7406;&#x539F;&#x59CB;&#x503C;&#x7684;&#x51FD;&#x6570;&#x3002;&#x5B83;&#x4EEC;&#x901A;&#x8FC7;&#x4E00;&#x4E2A;&#x201C;&#x7BA1;&#x9053;&#x201D;&#x5728;&#x6307;&#x4EE4;&#x6216;&#x7ED1;&#x5B9A;&#x4E2D;&#x8FDB;&#x884C;&#x5904;&#x7406;&#xFF1A;</p>
<pre><code>&lt;div&gt;{{message | capitalize}}&lt;/div&gt;
</code></pre><p>&#x8FD9;&#x6837;&#x5728; div &#x7684;&#x6587;&#x672C;&#x5185;&#x5BB9;&#x88AB;&#x66F4;&#x65B0;&#x4E4B;&#x524D;&#xFF0C;message &#x7684;&#x503C;&#x4F1A;&#x5148;&#x4F20;&#x7ED9; capitalizie &#x51FD;&#x6570;&#x5904;&#x7406;&#x3002;&#x66F4;&#x591A;&#x5185;&#x5BB9;&#x53EF;&#x79FB;&#x6B65;&#x81F3; &#x6DF1;&#x5165;&#x4E86;&#x89E3;&#x8FC7;&#x6EE4;&#x5668; (Filters)&#x3002;</p>
<h3 id="t9&#x7EC4;&#x4EF6; Components">&#x7EC4;&#x4EF6; Components <a href="#t9&#x7EC4;&#x4EF6; Components"> # </a></h3>
<p>Component Tree</p>
<p>&#x5728; Vue.js&#xFF0C;&#x6BCF;&#x4E2A;&#x7EC4;&#x4EF6;&#x90FD;&#x662F;&#x4E00;&#x4E2A;&#x7B80;&#x5355;&#x7684; Vue &#x5B9E;&#x4F8B;&#x3002;&#x4E00;&#x4E2A;&#x6811;&#x5F62;&#x5D4C;&#x5957;&#x7684;&#x5404;&#x79CD;&#x7EC4;&#x4EF6;&#x5C31;&#x4EE3;&#x8868;&#x4E86;&#x4F60;&#x7684;&#x5E94;&#x7528;&#x7A0B;&#x5E8F;&#x7684;&#x5404;&#x79CD;&#x63A5;&#x53E3;&#x3002;&#x901A;&#x8FC7; Vue.extend &#x8FD4;&#x56DE;&#x7684;&#x81EA;&#x5B9A;&#x4E49;&#x6784;&#x9020;&#x51FD;&#x6570;&#x53EF;&#x4EE5;&#x628A;&#x8FD9;&#x4E9B;&#x7EC4;&#x4EF6;&#x5B9E;&#x4F8B;&#x5316;&#xFF0C;&#x4E0D;&#x8FC7;&#x66F4;&#x63A8;&#x8350;&#x7684;&#x58F0;&#x660E;&#x5F0F;&#x7684;&#x7528;&#x6CD5;&#x662F;&#x901A;&#x8FC7; Vue.component(id, constructor) &#x6CE8;&#x518C;&#x8FD9;&#x4E9B;&#x7EC4;&#x4EF6;&#x3002;&#x4E00;&#x65E6;&#x7EC4;&#x4EF6;&#x88AB;&#x6CE8;&#x518C;&#xFF0C;&#x5B83;&#x4EEC;&#x5C31;&#x53EF;&#x4EE5;&#x5728; Vue &#x5B9E;&#x4F8B;&#x7684;&#x6A21;&#x677F;&#x4E2D;&#x4EE5;&#x81EA;&#x5B9A;&#x4E49;&#x5143;&#x7D20;&#x5F62;&#x5F0F;&#x4F7F;&#x7528;&#x4E86;&#x3002;</p>
<pre><code>&lt;my-component&gt;
  &lt;!-- internals handled by my-component --&gt;
&lt;/my-component&gt;
</code></pre><p>&#x8FD9;&#x4E2A;&#x7B80;&#x5355;&#x7684;&#x673A;&#x5236;&#x4F7F;&#x5F97;&#x6211;&#x4EEC;&#x53EF;&#x4EE5;&#x4EE5;&#x7C7B;&#x4F3C; Web Components &#x7684;&#x58F0;&#x660E;&#x5F62;&#x5F0F;&#x5BF9; Vue &#x7EC4;&#x4EF6;&#x8FDB;&#x884C;&#x590D;&#x7528;&#x548C;&#x7EC4;&#x5408;&#xFF0C;&#x540C;&#x65F6;&#x65E0;&#x9700;&#x6700;&#x65B0;&#x7248;&#x7684;&#x6D4F;&#x89C8;&#x5668;&#x6216;&#x7B28;&#x91CD;&#x7684; polyfills&#x3002;&#x901A;&#x8FC7;&#x5C06;&#x4E00;&#x4E2A;&#x5E94;&#x7528;&#x7A0B;&#x5E8F;&#x62C6;&#x5206;&#x6210;&#x7B80;&#x5355;&#x7684;&#x7EC4;&#x4EF6;&#xFF0C;&#x4EE3;&#x7801;&#x5E93;&#x53EF;&#x4EE5;&#x88AB;&#x5C3D;&#x53EF;&#x80FD;&#x7684;&#x89E3;&#x8026;&#xFF0C;&#x540C;&#x65F6;&#x66F4;&#x6613;&#x4E8E;&#x7EF4;&#x62A4;&#x3002;&#x66F4;&#x591A;&#x5173;&#x4E8E;&#x7EC4;&#x4EF6;&#x7684;&#x5185;&#x5BB9;&#xFF0C;&#x8BF7;&#x79FB;&#x6B65;&#x81F3; &#x7EC4;&#x4EF6;&#x7CFB;&#x7EDF;&#x3002;</p>
<h3 id="t10&#x7B80;&#x5355;&#x793A;&#x4F8B;">&#x7B80;&#x5355;&#x793A;&#x4F8B; <a href="#t10&#x7B80;&#x5355;&#x793A;&#x4F8B;"> # </a></h3>
<pre><code>&lt;div id=&quot;demo&quot;&gt;
  &lt;h1&gt;{{title | uppercase}}&lt;/h1&gt;
  &lt;ul&gt;
    &lt;li
      v-repeat=&quot;todos&quot;
      v-on=&quot;click: done = !done&quot;
      class=&quot;{{done ? &apos;done&apos; : &apos;&apos;}}&quot;&gt;
      {{content}}
    &lt;/li&gt;
  &lt;/ul&gt;
&lt;/div&gt;

var demo = new Vue({
  el: &apos;#demo&apos;,
  data: {
    title: &apos;todos&apos;,
    todos: [
      {
        done: true,
        content: &apos;Learn JavaScript&apos;
      },
      {
        done: false,
        content: &apos;Learn Vue.js&apos;
      }
    ]
  }
})
</code></pre><h2 id="t11&#x6307;&#x4EE4;">&#x6307;&#x4EE4; <a href="#t11&#x6307;&#x4EE4;"> # </a></h2>
<h2 id="t12&#x8FC7;&#x6EE4;&#x5668;">&#x8FC7;&#x6EE4;&#x5668; <a href="#t12&#x8FC7;&#x6EE4;&#x5668;"> # </a></h2>
<h2 id="t13&#x5217;&#x8868;&#x6E32;&#x67D3;">&#x5217;&#x8868;&#x6E32;&#x67D3; <a href="#t13&#x5217;&#x8868;&#x6E32;&#x67D3;"> # </a></h2>
<h2 id="t14&#x4E8B;&#x4EF6;&#x76D1;&#x542C;">&#x4E8B;&#x4EF6;&#x76D1;&#x542C; <a href="#t14&#x4E8B;&#x4EF6;&#x76D1;&#x542C;"> # </a></h2>
<h2 id="t15&#x5904;&#x7406;&#x8868;&#x5355;">&#x5904;&#x7406;&#x8868;&#x5355; <a href="#t15&#x5904;&#x7406;&#x8868;&#x5355;"> # </a></h2>
<h2 id="t16&#x8BA1;&#x7B97;&#x5C5E;&#x6027;">&#x8BA1;&#x7B97;&#x5C5E;&#x6027; <a href="#t16&#x8BA1;&#x7B97;&#x5C5E;&#x6027;"> # </a></h2>
<h2 id="t17&#x81EA;&#x5B9A;&#x4E49;&#x6307;&#x4EE4;">&#x81EA;&#x5B9A;&#x4E49;&#x6307;&#x4EE4; <a href="#t17&#x81EA;&#x5B9A;&#x4E49;&#x6307;&#x4EE4;"> # </a></h2>
<h2 id="t18&#x81EA;&#x5B9A;&#x4E49;&#x8FC7;&#x6EE4;&#x5668;">&#x81EA;&#x5B9A;&#x4E49;&#x8FC7;&#x6EE4;&#x5668; <a href="#t18&#x81EA;&#x5B9A;&#x4E49;&#x8FC7;&#x6EE4;&#x5668;"> # </a></h2>
<h2 id="t19&#x7EC4;&#x4EF6;&#x7CFB;&#x7EDF;">&#x7EC4;&#x4EF6;&#x7CFB;&#x7EDF; <a href="#t19&#x7EC4;&#x4EF6;&#x7CFB;&#x7EDF;"> # </a></h2>
<h2 id="t20&#x8FC7;&#x6E21;&#x6548;&#x679C;">&#x8FC7;&#x6E21;&#x6548;&#x679C; <a href="#t20&#x8FC7;&#x6E21;&#x6548;&#x679C;"> # </a></h2>
<h2 id="t21&#x6784;&#x5EFA;&#x5E94;&#x7528;">&#x6784;&#x5EFA;&#x5E94;&#x7528; <a href="#t21&#x6784;&#x5EFA;&#x5E94;&#x7528;"> # </a></h2>

        <div class="copyright">Powered by <a href="https://github.com/jaywcjlove/idoc" target="_blank">idoc</a>. Dependence <a href="https://nodejs.org">Node.js</a> run.</div>
    </div>

</div>


</body>
</html>
